<script setup>
import OImage from "../setting/Images.vue";
import AlphaColor from "../setting/AlphaColor.vue";
import Slider from "../setting/Slider.vue";
import Color from "../setting/Color.vue";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:config", "change"]);

const form = ref({
  $position: { top: 0, left: 0 },
  $size: { width: 270, height: 250 },
  $removeable: true,
  type: "recharge",
  color: "#000000",
  displayType: 0,
  fontSize: 14,
  prizePosition: { top: 10, left: 10 },
  prizeSize: { width: 250, height: 100 },
  receiveBtn: "./imagesStatic/activity/goods_btn.png",
  receiveBtnPosition: { top: 188, left: 81 },
  receiveBtnSize: { width: 111, height: 56 },
  inputPosition: { top: 138, left: 40 },
  inputSize: { width: 195, height: 30 },
  inputBgColor: "#ffffff",
  inputBorderColor: "",
  borderRadius: 15,
  inputColor: "#000000",
  qrcodeBgShow: false,
  qrcodeBgPosition: { top: 138, left: 84 },
  qrcodePosition: { top: 10, left: 10 },
  qrcodeBgSize: { width: 100, height: 100 },
  qrcodeSize: { width: 80, height: 80 },
  packZonePosition: { left: 10, top: 138 },
  packZoneSize: { width: 250, height: 100 },
  radioColor: "#1989FA",
  packPrizeColor: "#000000",
  packFontSize: 14,
  packPrizeSize: { width: 56, height: 56 },
  packDisplayType: 0,
  packDisplayWrap: "horizontal",
});

const prizeTypeList = [
  { label: "在线直充", key: "recharge" },
  { label: "电子卡密", key: "cardPassword" },
  { label: "外部卡券", key: "externalCoupon" },
  { label: "礼品包(多选一)", key: "pack" },
];

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const onChange = (val) => {
  detail.value = detail.value;
};

onMounted(() => {
  nextTick(() => {
    onChange();
  });
});
</script>
<template>
  <el-form :model="detail" :disabled="disabled" label-width="auto">
    <el-form-item label="奖品类型" prop="type">
      <el-select
        v-model="detail.type"
        placeholder="请选择"
        style="width: 200px"
        @change="onChange"
      >
        <el-option
          v-for="(item, key) in prizeTypeList"
          :label="item.label"
          :value="item.key"
        />
      </el-select>
    </el-form-item>
    <Color v-model="detail.color" name="文字颜色" @change="onChange" />
    <Slider
      v-model="detail.fontSize"
      name="文字大小"
      :min="10"
      :max="36"
      @change="onChange"
    />
    <el-form-item label="奖品样式" prop="displayType">
      <el-radio-group v-model="detail.displayType" @change="onChange">
        <el-radio :label="0">默认</el-radio>
        <el-radio :label="1">只显示名称</el-radio>
        <el-radio :label="2">只显示图片</el-radio>
        <el-radio :label="3">不显示</el-radio>
      </el-radio-group>
    </el-form-item>
    <template v-if="detail.type === 'recharge'">
      <AlphaColor
        v-model="detail.inputBgColor"
        name="输入框背景色"
        @change="onChange"
      />
      <Color
        v-model="detail.inputColor"
        name="输入框文字颜色"
        @change="onChange"
      />
      <AlphaColor
        v-model="detail.inputBorderColor"
        name="输入框边框颜色"
        @change="onChange"
      />
      <Slider
        v-model="detail.borderRadius"
        name="输入框圆角"
        :max="20"
        @change="onChange"
      />
      <OImage
        v-model="detail.receiveBtn"
        v-model:size="detail.receiveBtnSize"
        name="领奖按钮"
        @change="onChange"
      />
    </template>
    <template v-else-if="detail.type === 'cardPassword'">
      <AlphaColor
        v-model="detail.inputBgColor"
        name="卡密背景色"
        @change="onChange"
      />
      <Color
        v-model="detail.inputColor"
        name="卡密文字颜色"
        @change="onChange"
      />
      <AlphaColor
        v-model="detail.inputBorderColor"
        name="卡密边框颜色"
        @change="onChange"
      />
      <Slider
        v-model="detail.borderRadius"
        name="边框圆角"
        :max="20"
        @change="onChange"
      />
      <OImage
        v-model="detail.receiveBtn"
        v-model:size="detail.receiveBtnSize"
        name="复制卡密按钮"
        @change="onChange"
      />
    </template>
    <template v-else-if="detail.type === 'externalCoupon'">
      <Slider
        v-model="detail.borderRadius"
        name="边框圆角"
        :max="20"
        @change="onChange"
      />
      <AlphaColor
        v-model="detail.inputBgColor"
        name="二维码背景色"
        @change="onChange"
      />
      <OImage
        v-model="detail.qrcodeBg"
        v-model:size="detail.qrcodeBgSize"
        v-model:show="detail.qrcodeBgShow"
        name="二维码背景图"
        @change="onChange"
      />
      <OImage
        v-model="detail.receiveBtn"
        v-model:size="detail.receiveBtnSize"
        name="跳转按钮"
        @change="onChange"
      />
    </template>
    <template v-else-if="detail.type === 'pack'">
      <el-form-item label="礼品包奖品布局" prop="packDisplayWrap">
        <el-radio-group v-model="detail.packDisplayWrap" @change="onChange">
          <el-radio label="horizontal">横向布局</el-radio>
          <el-radio label="column">纵向布局</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="礼品包奖品样式" prop="packDisplayType">
        <el-radio-group v-model="detail.packDisplayType" @change="onChange">
          <el-radio :label="0">默认</el-radio>
          <el-radio :label="1">只显示名称</el-radio>
          <el-radio :label="2">只显示图片</el-radio>
        </el-radio-group>
      </el-form-item>
      <Color v-model="detail.radioColor" name="单选框颜色" @change="onChange" />
      <Slider
        v-model="detail.packFontSize"
        name="奖品文字大小"
        :min="10"
        :max="36"
        @change="onChange"
      />
      <Color
        v-model="detail.packPrizeColor"
        name="奖品文字颜色"
        @change="onChange"
      />
      <OImage
        v-model="detail.receiveBtn"
        v-model:size="detail.receiveBtnSize"
        name="领奖按钮"
        @change="onChange"
      />
    </template>
  </el-form>
</template>
